{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.css' %}">
    <style>
        .box {
            width: 480px;
            border: 1px solid #ddd;
            margin-right: auto;
            margin-left: auto;
            margin-top: 100px;
            padding-right: 40px;
            padding-left: 40px;
            padding-bottom: 40px;
            box-shadow: 5px 10px 10px rgb(0, 0, 0, .5);
        }

        .error-message {
            color: red;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="box">
    <h1 style="text-align: center">短信登录</h1>
    {#可以不写action，因为默认会提交哦啊当前页面#}
    {#<form method="post" action="/login/">#}
    <form id="smsForm" novalidate>
        {% csrf_token %}
        {% for field in form %}
            {% if field.label != '验证码' %}
                <div class="form-group" style="position: relative;margin-bottom: 25px">
                    {{ field.label }}
                    {{ field }}
                    <span class="error-message">{{ field.errors.0 }}</span>
                </div>
            {% else %}
                <div class="form-group" style="position: relative;margin-bottom: 25px">
                    {{ field.label }}
                    <div class="row">
                        <div class="col-xs-7">
                            {{ field }}
                            <span class="error-message">{{ field.errors.0 }}</span>
                        </div>
                        <div class="col-xs-5">
                            <input type="button" id="sendBtn" class="btn btn-default" value="获取验证码">
                        </div>
                    </div>

                </div>
            {% endif %}
        {% endfor %}
        <!--不要用submit，因为表单提交会刷新页面，用的是ajax不希望刷新页面-->
        <button type="button" class="btn btn-primary" id="loginBtn">登录</button>
        <a href="{% url 'login' %}" style="float: right">用户登陆</a>
    </form>
</div>
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'js/csrf.js' %}"></script>
<script>
    $(function () {
        bindSendSmsEvent();

        bindLoginEvent();
    })

    function bindLoginEvent() {
        $('#loginBtn').click(function () {
            // 清除所有的错误
            $('.error-message').empty()

            // 1. 获取表单数据
            var data = $('#smsForm').serialize();
            // 2. 发送ajax请求
            $.ajax({
                url: '{% url "sms_login" %}',
                type: 'POST',
                data: data,
                dataType: 'json',
                success: function (res) {
                    // {"status": false, "form": {"mobile": ["手机号不能为空"],'code':[...]}}
                    console.log(res)
                    if (res.status) {
                        // res.data = '/level/list/'
                        // 通过location.href跳转页面
                        location.href = res.data
                    } else {
                        $.each(res.detail, function (k, v) {
                            $('#id_' + k).next().text(v[0])
                        })
                    }
                }
            })
        })
    }

    function bindSendSmsEvent() {
        $('#sendBtn').click(function () {
            // 1. 获取手机号向后台发送请求
            // 发送ajax请求需要在urls中配置路由，并且需要配置视图函数

            // 清除所有的错误
            $('.error-message').empty()

            $.ajax({
                url: '{% url "sms_send" %}',
                type: 'POST',
                data: {
                    mobile: $('#id_mobile').val(),
                    role: $('#id_role').val()
                },
                dataType: 'json', // dataType: 'json' 将返回的数据转为json格式
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                },
                success: function (res) {
                    // {"status": false, "form": {"mobile": ["手机号不能为空"],'code':[...]}}
                    console.log(res)
                    if (res.status) {
                        sendSmsRemind()
                    } else {
                        $.each(res.detail, function (k, v) {
                            $('#id_' + k).next().text(v[0])
                        })
                    }
                }
            })
        })
    }

    function sendSmsRemind() {
        var $smsBtn = $('#sendBtn');
        // 2.2 禁用手机号
        $smsBtn.prop('disabled', true);

        // 2.3 改内容
        var time = 3;
        var remind = setInterval(function () {
            $smsBtn.val(time + '秒后重新发送');
            time = time - 1;
            if (time < 0) {
                clearInterval(remind);
                $smsBtn.val('重新发送')
                $smsBtn.prop('disabled', false);
            }
        }, 1000)

    }


</script>
</body>
</html>